 const gulp = require('gulp'),
       htmlmin = require('gulp-htmlmin'),
       cleanCss = require('gulp-clean-css'),
        autoprefixer =require('gulp-autoprefixer'),
       uglify = require('gulp-uglify'),
       babel = require('gulp-babel'),
       del = require('del'),
       connect = require('gulp-connect'),
       sass = require('gulp-sass'),
       //引入一个包的同时解构出来
      { createProxyMiddleware } = require('http-proxy-middleware')

 
       

const delDist = () => del('dist')


const paths = {
    html:{
        src:'src/**/*.html',
        dest:'dist' 
    },
    css: {
        src:'src/css/**/*.scss',
        dest: 'dist/css'
    },
    js: {
        src:'src/js/**/*.js',
        dest:'dist/js'
    },
    imgs: {
        src:'src/images/**',
        dest:'dist/images'
    },
    libs: {
         src: 'src/libs/**',
         dest:'dist/libs'
    }

}
 //制定html任务
 const html = () => {
    return gulp.src(paths.html.src)
    .pipe(htmlmin({
        removeComments: true, // 清除HTML注释
        collapseWhitespace: true, // 压缩HTML
        collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
        minifyJS: true, // 压缩页面JS
        minifyCSS: true // 压缩页面CSS 
    }))
    .pipe(gulp.dest(paths.html.dest))
    .pipe(connect.reload())
 }
//先加上浏览器的兼容前缀 ，压缩scss文件

const css = () => {
  return gulp.src(paths.css.src)
  .pipe(sass())
  .pipe(autoprefixer({
      cascade: false
  }))
  .pipe(cleanCss()) 
  .pipe(gulp.dest(paths.css.dest)) 
  .pipe(connect.reload())
}
 
//制定js任务
const js = () =>{
    return gulp.src(paths.js.src)
    .pipe(babel({
        presets:['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(connect.reload())
}
//制定imgs任务: 移动imgs任务
const imgs = () => gulp.src(paths.imgs.src).pipe(gulp.dest(paths.imgs.dest))
//箭头函数里面只有一句话 而且这句话就是return所以大括号 跟 return关键字都可以省略

//制定一个libs任务
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))



//制定一个sever： 再dist目录开启服务器
//middleware 是一个中间件  是一个接收请求  反应的中间做的事情
const server = () => {
    connect.server({
        root:'dist',
        port:'2333',
        livereload:true,
        host:"::",
        middleware(){
            return[
                //把前端以/mtop开头的请求代理到'https://m.xiaomiyoupin.com'
               createProxyMiddleware('/mtop',{
                   target:'https://m.xiaomiyoupin.com',
                   changeOrigin:true
               })
            ]
        }
    })
}
//制定一个ico 任务  把ico图标移动到dist
// const ico = () => gulp.src(paths.ico.src).pipe(gulp.dest(paths.ico.dest))
// 制定一个 watch任务： 监听文件修改自动重启对应任务
const watch = () => {
    //监听 src 里面html文件修改 自动重启html文件
    gulp.watch(paths.html.src,html)
    gulp.watch(paths.css.src,css)
    gulp.watch(paths.js.src,js)
}

//parallel  异步执行任务
//series  同步执行任务
//只导出default一个任务 ， 这一个任务里先同步删除dist，再异步执行了其他所有任务
module.exports.default =gulp.series(delDist, gulp.parallel(html, css, js, imgs, libs,server,watch,))
//  module.exports = {
//      html,
//      css,
//      js

//  }